<script setup>
  import { computed, reactive, onMounted } from 'vue';
  import sheep from '@/sheep';

  const emits = defineEmits(['closePopup']);

  const state = reactive({
    list: [],
  });
  const props = defineProps({
    // 是否显示弹窗
    show: {
      type: Boolean,
      default: false,
    },
    // 弹窗样式
    popupMainStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  });
  const vipDisposition = reactive({
    isShow: false,
    goodDetails: {},
  });
  const nc_image_path = computed(() => sheep.$store('AI').nc_image_path);
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const version = computed(() => sheep.$store('AI').version);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);
  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  onMounted(async () => {
    const { data } = await sheep.$api.goods.ids({ ids: '10' });
    vipDisposition.goodDetails = data[0];
    const res = await sheep.$api.user.getVipList({
      limit: 12,
    });
    state.list = res.data;
  });

  function closePopup() {
    emits('closePopup');
  }

  function exchangeImmediately() {
    sheep.$router.go('/pages/vip/memberCenter');
  }

  async function purchaseMembership() {
   sheep.$router.go('/pages/vip/liberal')
  }
</script>

<template>
  <su-popup type="center" :show="show" backgroundColor="transparent" @close="closePopup">
    <view class="mainPopup" :style="popupMainStyle">
      <!--      <slot name="default" />-->
      <!--      <image class="closeImage" :src="`${nc_image_path}/nc_close.png`" @tap.stop="closePopup()"></image>-->
      <view class="vip_all flex align-center justify-center">
        <view class="vip_list flex flex-column" style="position: relative">
          <image :src="`${IMG_URL}/index/tanchuang_biaoshi.png`" class="wh_186 hW_185"
                 style="position: absolute;top: 19rpx;right: 11rpx"></image>
          <view class="z_1 wh_146 hW_48 flex align-center justify-center fs_30 fw_500 color_FFFFFF mt_15 ml_19"
                style="background: linear-gradient( 150deg, #FF8676 0%, #E9719C 100%);border-radius: 23rpx 23rpx 23rpx 23rpx;"
          >
            拾亲VIP
          </view>
          <view class="z_1 flex align-center justify-between mt_24">
            <view class="ml_17 fs_38 fw_bold" style="color: #FF7950">
              开通VIP会员
            </view>
            <view class="mr_40 fs_24 fw_bold" style="color: #ff7950" @click.stop="exchangeImmediately"
                  v-if="mp_code != appVersion">
              兑换
            </view>
          </view>
          <view class="z_1 ml_17 flex align-center fs_58 fw_bold" style="color: #ff7950">
            获得超多权益
          </view>
          <view class="z_1 mt_18 flex align-center justify-center fs_20 fw_bold" style="color: #FFC361;">
            开通会员可获得以下权益
          </view>
          <view class=" z_1mt_24 ml_25 mr_25 mb_24"
                style="display: grid;grid-template-rows: repeat(3,1fr);grid-template-columns: repeat(4,1fr);grid-gap: 29rpx"
          >
            <view class="flex align-center flex-column" v-for="(item,index) in state.list" :key="index">
              <view class="wh_86 hW_86 flex align-center justify-center"
                    style="background: #FFEED3;border-radius: 20rpx 20rpx 20rpx 20rpx;border: 2rpx solid #FFCE80;"
              >
                <image :src="item.image" class="wh_50 hW_48"></image>
              </view>
              <view style="color: #BE7600;white-space: nowrap" class="fs_20 fw_500 mt_8">
                {{ item.desc }}
              </view>
            </view>
          </view>
          <view class="z_1 flex align-center justify-center">
            <view class="wh_463 hW_80 bg_FF4206 fs_38 fw_bold color_FFFFFF flex align-center justify-center"
                  style="border-radius: 55rpx"
                  @click.stop="purchaseMembership"
            >
              10元 开通一年会员
            </view>
          </view>
          <view class="z_1 fs_20 fw_500 flex align-center justify-center mt_25" style="color: #C3C3C3;">
            开通即视为阅读并同意
            <text class="color_FF4206" @click.stop="sheep.$router.go('/pages/public/richtext',{id:4,title:'会员权益'})">
              「会员协议」
            </text>
          </view>
        </view>
      </view>
    </view>
  </su-popup>
</template>

<style scoped lang="scss">
  .mainPopup {
    position: relative;
  }

  .closeImage {
    position: absolute;
    top: 33rpx;
    right: 0rpx;
    width: 58rpx;
    height: 58rpx;
  }

  .vip_all {
    width: 552rpx;
    height: 947rpx;
    background: linear-gradient(179deg, #FFFFFF 0%, #F8F0E0 100%);
    border-radius: 62rpx 119rpx 62rpx 62rpx;
  }

  .vip_list {
    width: 508rpx;
    height: 903rpx;
    border-radius: 44rpx 109rpx 44rpx 44rpx;
    border: 2rpx solid #FFE5C4;
  }
</style>